<template>
    <div class="other-inbound-page">
        <!-- 顶部筛选栏 -->
        <el-form :model="searchForm" inline label-width="80px" class="top-filter">
            <el-form-item label="客户">
                <el-select v-model="searchForm.supplier" placeholder="（空）" style="width: 200px;">
                    <el-option v-for="item in supplierOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="业务员">
                <el-select v-model="searchForm.salesman" placeholder="请选择业务员" style="width: 200px;">
                    <el-option v-for="item in salesmanOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="单据日期">
                <el-date-picker v-model="searchForm.billDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select v-model="searchForm.businessType" placeholder="请选择业务类型" style="width: 200px;">
                    <el-option label="其他入库" value="otherInbound" />
                    <!-- 可扩展其他类型 -->
                </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select v-model="searchForm.businessSubType" placeholder="请选择业务子类" style="width: 200px;">
                    <el-option label="其他" value="other" />
                    <!-- 可扩展其他子类 -->
                </el-select>
            </el-form-item>
            <span class="bill-no">单据编号：</span>
        </el-form>

        <!-- 商品录入表格 -->
        <el-table :data="tableData" border style="width: 100%; margin-top: 16px"
            :header-cell-style="{ background: '#F8F9FA' }">
            <!-- 序号列 -->
            <el-table-column type="index" label="序号" width="60" align="center" />
            <!-- 商品录入列 -->
            <el-table-column label="商品-扫描枪录入" width="280">
                <template #default="scope">
                    <el-input v-model="scope.row.goodsInput" placeholder="输入商品或扫码" clearable style="width: 200px;" />
                    <el-button type="text" @click="openGoodsSelect(scope.row)">选择</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="goodsCategory" label="商品类别" width="120" />
            <el-table-column prop="brand" label="品牌" width="100" />
            <el-table-column prop="attribute" label="属性" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="isCombined" label="合用" width="60">
                <template #default="scope">
                    <el-checkbox v-model="scope.row.isCombined" />
                </template>
            </el-table-column>
            <el-table-column prop="batch" label="批量" width="80" />
            <el-table-column prop="availableStock" label="可用库存" width="100" />
            <el-table-column prop="quantity" label="数量" width="80">
                <template #default="scope">
                    <el-input v-model.number="scope.row.quantity" placeholder="输入数量" clearable
                        @input="calculateInAmount(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column prop="wholePackage" label="整件数包" width="100" />
            <el-table-column prop="inPrice" label="出库单位成本" width="100">
                <template #default="scope">
                    <el-input v-model.number="scope.row.inPrice" placeholder="输入单价" clearable
                        @input="calculateInAmount(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column prop="inAmount" label="出库成本" width="120" />
            <el-table-column prop="remark" label="备注" width="120" />
            <!-- 操作列（增删行） -->
            <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                    <el-button type="primary" size="mini" icon="el-icon-plus"
                        style="background: #67C23A; border-color: #67C23A; margin-right: 4px"
                        @click="addRow(scope.$index)">添加</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-minus" v-if="scope.$index !== 0"
                        @click="deleteRow(scope.$index)">减少</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 合计栏 -->
        <div class="summary-bar" style="margin-top: 8px">
            <el-form :model="summaryForm" inline label-width="80px">
                <el-form-item label="合计">
                    <span>{{ totalAmount }}</span>
                </el-form-item>
                <!-- 可扩展其他合计字段 -->
            </el-form>
        </div>

        <!-- 自定义字段等操作栏 -->
        <div class="bottom-bar" style="margin-top: 16px">
            <el-button @click="handleCustomFields">自定义字段</el-button>
            <!-- 可扩展其他操作按钮 -->
        </div>

        <!-- 商品选择弹窗 -->
        <el-dialog title="选择商品" v-model="goodsSelectVisible" width="800px" @close="closeGoodsSelect">
            <el-input v-model="goodsSearchKey" placeholder="输入商品编号/名称/型号" clearable
                style="width: 240px; margin-bottom: 12px" @keyup.enter="searchGoods" />
            <el-table :data="goodsList" border style="width: 100%; max-height: 300px; overflow-y: auto"
                @selection-change="handleGoodsSelection">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="goodsCode" label="商品编号" width="120" />
                <el-table-column prop="goodsName" label="商品名称" width="200" />
                <el-table-column prop="spec" label="规格型号" width="150" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="goodsSelectVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmGoods">确认选择</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'OtherOutbound',
    data() {
        return {
            // 顶部筛选表单
            searchForm: {
                supplier: '',
                salesman: '',
                billDate: '2025-06-25',
                businessType: 'otherInbound',
                businessSubType: 'other',
            },
            // 供应商、业务员下拉选项（可从接口获取）
            supplierOptions: [
                { label: '供应商A', value: 'A' },
                { label: '供应商B', value: 'B' },
            ],
            salesmanOptions: [
                { label: '业务员甲', value: 'sales01' },
                { label: '业务员乙', value: 'sales02' },
            ],
            // 表格数据
            tableData: [
                {
                    goodsInput: '',
                    goodsCategory: '',
                    brand: '',
                    attribute: '',
                    unit: '',
                    isCombined: false,
                    batch: '',
                    availableStock: '',
                    quantity: 0,
                    wholePackage: '',
                    inPrice: 0,
                    inAmount: 0,
                    remark: '',
                },
            ],
            // 商品选择相关
            goodsSelectVisible: false,
            currentRow: null,
            goodsSearchKey: '',
            goodsList: [
                { goodsCode: 'SP001', goodsName: '商品1', spec: '规格1' },
                { goodsCode: 'SP002', goodsName: '商品2', spec: '规格2' },
                // 模拟商品数据，实际可从接口获取
            ],
            selectedGoods: [],
            // 合计相关
            totalAmount: 0,
        };
    },

    methods: {
        // 表格行操作：添加行
        addRow(index) {
            this.tableData.splice(index + 1, 0, {
                goodsInput: '',
                goodsCategory: '',
                brand: '',
                attribute: '',
                unit: '',
                isCombined: false,
                batch: '',
                availableStock: '',
                quantity: 0,
                wholePackage: '',
                inPrice: 0,
                inAmount: 0,
                remark: '',
            });
        },
        // 计算单行入库金额
        calculateInAmount(row) {
            if (row.inPrice !== undefined && row.quantity !== undefined) {
                row.inAmount = row.inPrice * row.quantity;
                this.calculateTotalAmount();
            }
        },

        // 计算总金额
        calculateTotalAmount() {
            this.totalAmount = this.tableData.reduce((sum, row) => sum + (row.inAmount || 0), 0);
        },

        // 表格行操作：删除行（首行可根据需求调整是否可删）
        deleteRow(index) {
            if (index === 0) {
                this.$message.warning('首行不可删除');
                return;
            }
            this.tableData.splice(index, 1);
        },
        // 打开商品选择弹窗
        openGoodsSelect(row) {
            this.currentRow = row;
            this.goodsSelectVisible = true;
        },
        // 搜索商品（模拟，实际调接口）
        searchGoods() {
            // 这里可根据搜索关键词对接接口筛选商品，以下为简单模拟
            const filtered = this.goodsList.filter((item) =>
                item.goodsName.includes(this.goodsSearchKey)
            );
            this.goodsList = filtered;
        },
        // 选择商品
        handleGoodsSelection(selection) {
            this.selectedGoods = selection;
        },
        // 确认选择商品
        confirmGoods() {
            if (this.selectedGoods.length && this.currentRow) {
                const selected = this.selectedGoods[0];
                this.currentRow.goodsInput = selected.goodsName;
                this.currentRow.goodsCategory = selected.spec;
                // 可回填更多商品字段...
                this.goodsSelectVisible = false;
            } else {
                this.$message.warning('请选择商品');
            }
        },
        // 关闭商品选择弹窗
        closeGoodsSelect() {
            this.currentRow = null;
            this.goodsSearchKey = '';
            this.selectedGoods = [];
            // 可重置商品列表为原始数据
        },
        // 自定义字段操作（模拟）
        handleCustomFields() {
            this.$message.info('自定义字段功能待实现');
        },
    },
};
</script>

<style scoped>
.other-inbound-page {
    padding: 24px;
    background: #fff;
    height: 800px;
}

.top-filter {
    margin-bottom: 12px;
}

.table {
    margin-top: 12px;
}

.goods-select-table {
    max-height: 300px;
    overflow-y: auto;
}

.bottom-bar {
    margin-top: 16px;
}

/* 滚动条样式优化（可选） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>